<template>
  <div id="app">
    <h1>Vue中异步组件的使用</h1>
    <button @click="handleClick">按钮</button>
    <div v-if="show">
      <AsyncList />
    </div>
  </div>
</template>

<script>
import LoadingComponent from './LoadingComponent';
import ErrorComponent from './ErrorComponent';

const AsyncList = () => ({
  component: import(/* webpackChunkName: 'list' */ './List'),
  loading: LoadingComponent,
  error: ErrorComponent,
  delay: 200,
  timeout: 3000
});

export default {
  data() {
    return {
      show: false
    }
  },
  methods: {
    handleClick() {
      this.show = !this.show;
    }
  },
  components: {
    AsyncList
  }
}
</script>

<style>
#app {
  text-align: center;
}
</style>